<template>
	<div class="updataMonthly">
		<!-- 规则 -->
		<el-form :model="upData" style="margin-left:20px;" :rules="rules" ref="ruleForm" label-position=right label-width="90px">
			<el-form-item label="规则名称:" prop="ruleName">
			  <el-input v-model="upData.ruleName"></el-input>
			</el-form-item>
			<el-form-item label="适用车场:">
      </el-form-item>
      <el-form-item label-width="0" v-if="selectParkShow" class="parkList">
        <template v-for="item in Letter">
          <span :class="{active: actived == item}" @click="getAllPark(item)">{{item}}</span>
        </template>
        <span class="allSeletc" @click="ifAllParks = true;getAllPark()" :indeterminate="isIndeterminate">A-Z全选</span>
        <span class="allSeletc" @click="empty">清空</span>
        <hr/>
        <template>
          <el-checkbox-group class="parkNames" v-model="upData.parkIds" v-for="item in parkList">
            <el-checkbox :label="item.id" :disabled="ruleParkIds.indexOf(item.id) > -1" >{{ item.parkName }}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-form-item>
			<el-form-item label="月付租金:">
			  <el-input v-model.number="upData.monthAmount" type="number"></el-input>
        <el-input class="days" v-model="upData.monthDays">
          <template slot="append">天</template>
        </el-input>
      </el-form-item>
      <el-form-item label="季付租金:">
        <el-input v-model.number="upData.quarterAmount" type="number"></el-input>
        <el-input class="days" v-model="upData.quarterDays">
          <template slot="append">天</template>
        </el-input>
      </el-form-item>
      <el-form-item label="年付租金:">
        <el-input v-model.number="upData.yearAmount" type="number"></el-input>
        <el-input class="days" v-model="upData.yearDays">
          <template slot="append">天</template>
        </el-input>
      </el-form-item>
      <el-form-item label="备注描述:">
        <el-input type="textarea" :rows="2" v-model="upData.remark" style="width: 400px;">
        </el-input>
      </el-form-item>
			<el-form-item>
				<p style="text-align: center;margin-left: -20px;">
          <el-button @click="cancel">取消</el-button>
					<el-button type="warning" @click="confirmUpdate('ruleForm')">确认</el-button>
				</p>
		    </el-form-item>
    </el-form>
	</div>
</template>

<script>
export default{
	name:'updataMonthly',
  props: ['id'],
	data(){
		return{
      checkList: [],
      actived: 'A',
      Letter: ["A","B","C","D","E","F","G","H","J","K","L","M","N","O","P","Q","R","S","T","W","X","Y","Z"],
      upData: {
        monthAmount: 0,
        quarterAmount: 0,
        yearAmount:0,
        parkIds: [],
        ifAllParks: 0,
        ruleName: '',

      },
      parkList: [],
      selectParkShow: true,
			addShow:true,
      ifAllParks: false,
      isIndeterminate: true,
      ruleParkIds: [],
      rules: {
        ruleName: { required: true, message: '请输入规则名称', trigger: 'blur' },
      }
		}
	},
	mounted(){
    this.getMonthRule();
    this.getAllPark('A');
    this.getMonthRuleParkList();
	},
	methods:{
    getMonthRule() {
      this.$axios({
        method: 'get',
        url: '/promotion/month-rule/getMonthRuleById',
        params: { id : this.id }
      }).then((res) => {
        this.upData.ruleName = res.data.ruleName;
        this.upData.monthAmount = res.data.monthAmount;
        this.upData.quarterAmount = res.data.quarterAmount;
        this.upData.yearAmount = res.data.yearAmount;
        this.upData.monthDays = res.data.monthDays;
        this.upData.quarterDays = res.data.quarterDays;
        this.upData.yearDays = res.data.yearDays;
        let monthRuleIds = [];
        res.data.monthRuleParks.forEach(item => {
          monthRuleIds.push(item.parkId)
          this.upData.parkIds.push(item.parkId)
        })
        let diff = this.ruleParkIds.filter(function (val) { return monthRuleIds.indexOf(val) === -1 });
        this.ruleParkIds = diff;
      })
    },

    //根据首字母查询车场名称展示
    getAllPark(letter) {
      this.parkList = [];
      this.actived = letter;
      this.$axios({
        method: 'get',
        url: '/park/park-info/getParkList',
      }).then((res) => {
          res.data.forEach(item => {
            if(this.ifAllParks) {
              this.parkList.push(item);
            } else {
              if(item.parkNameFirstSpell == letter) {
                this.parkList.push(item)
              }
            }
          })
          //全选排除掉已有规则的车场
          if(this.ifAllParks) {
            let ruleIds = this.ruleParkIds
            let arr = [];
            res.data.forEach(item => {
              arr.push(item.id)
            })
            let diff = arr.filter(function (val) { return ruleIds.indexOf(val) === -1 });
            this.upData.parkIds = diff;
          }
          this.ifAllParks = false;
      })
    },

    //获取已有规则的停车场
    getMonthRuleParkList() {
      this.$axios({
        method: 'get',
        url: '/promotion/month-rule-park/getMonthRuleParkList',
      }).then((res) => {
        res.data.forEach((rulePark) => {
          this.ruleParkIds.push(rulePark.parkId);
        })
        this.getMonthRule();
      })
    },

    //清空选中的车场
    empty() {
      this.upData.parkIds = [];
    },

		//确认新增规则接口
		confirmUpdate(formName){
      this.upData.id = this.id;
      if((this.upData.monthAmount == null || this.upData.monthAmount == '')  && (this.upData.quarterAmount == null || this.upData.quarterAmount == '') && (this.upData.yearAmount == null || this.upData.yearAmount == '')) {
        this.$message.warning('金额不能为空！')
        return false
      }
      if(this.upData.ifAllParks == 0) {
        if(this.upData.parkIds.length == 0) {
          this.$message.warning('请选择停车场！')
        } else {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$axios({
                method: 'post',
                url: '/promotion/month-rule/updateMonthRule',
                data: this.upData
              }).then((res) => {
                if(res.code == 200) {
                  this.$message.success('新增规则成功！');
                  this.$emit('closeDialog');
                  this.$emit('refresh')
                } else {
                  this.$message.error('新增规则失败！')
                }
              })
            } else {
              return false;
            }
          });
        }
      }
		},

    cancel() {
      this.$emit('closeDialog');
    }
	}
}
</script>

<style scoped>
.el-input{
	width: 300px;
}
.rul{
	width: 130px;
	margin:0 6px;
}
.adrul{
	font-size: 24px;
	color: red;
	float: right;
	margin-right: 50px;
}
.adrul:hover{
	cursor: pointer;
}
.ruletips{
	margin-left: 60px;
	color: #aaa;
}
.parkList {
  height: 200px;
  width: 670px;
  overflow: scroll;
}
.parkList span {
  padding: 6px;
}
.parkList span:hover {
  cursor: pointer;
}
.parkNames {
  display: inline-block;
  width: 150px;
  padding: 0;
  overflow: hidden;
}
.active {
  background-color: #1890FF;
  border-radius: 5px;
  color: #fff;
}
.allSeletc {
  background-color: #09CCDE;
  border-radius: 3px;
}
.days {
  width: 112px;
}







</style>
